<template>
  <div class="worker-list">
    <a-card>
      维修工页面
      <div style="text-align: right;">
        <a-input placeholder="请输入修理工名称" v-model="searchData.name" style="width: 280px;display: inline-block;margin-right: 10px;" />
        <a-input placeholder="请输入修理工编号" v-model="searchData.identify" style="width: 280px;display: inline-block;margin-right: 10px;" />
        <a-select v-model="searchData.repairType" style="width: 280px;margin-right:10px;" placeholder="请输入维修类型" allowClear @dropdownVisibleChange="(page) => {page ? this.getWorkTypeInfo() : ''}">
          <a-select-option v-for="(item, i) in repairTypeArr" :value="item .value" :key="i">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <a-button type="primary" @click="searchTableData">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card title="详细数据">
      <a-table :columns="columns"
               :data-source="workerData"
               :pagination="paginationConfig"
               @change="handleTablePageChange"
               :loading="loading">
        <span slot="balance" slot-scope="balance">
            <a-icon type="dollar"/> {{ balance.toFixed(2) }}
        </span>
        <template slot="operation" slot-scope="text, record">
          <a-button type="primary" style="margin-right: 10px;" @click="editWorkerInfo(record)">编辑</a-button>
          <a-button type="danger" @click="deleteWorkerInfo(record)">删除</a-button>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model="deleteVisible"
             :footer="null"
             title="删除数据">
      <div>确定删除此条数据吗？<br>删除后的数据将无法复原，请谨慎操作！</div>
      <div style="text-align: center;margin-top: 20px;">
        <a-button style="margin-right: 10px;" @click="cancelDelete">取消</a-button>
        <a-button type="primary" @click="confirmDelete">确认</a-button>
      </div>
    </a-modal>
    <a-drawer :visible="editVisible"
              :width="480"
              title="编辑数据"
              @close="drawerClose">
      <a-form-model ref="editBasicForm"
                    :model="editInfo"
                    :rules="editInfoRules"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
        <a-form-model-item label="姓名" prop="name">
          <a-input v-model="editInfo.name" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="年龄" prop="age">
          <a-input v-model="editInfo.age"></a-input>
        </a-form-model-item>
        <a-form-model-item label="联系方式" prop="phone">
          <a-input v-model="editInfo.phone"></a-input>
        </a-form-model-item>
        <a-form-model-item label="生源地" prop="bornFrom">
          <a-input v-model="editInfo.bornFrom"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 24 }" style="text-align:center;">
          <a-button style="margin-right: 10px;" @click="cancelEdit">取消</a-button>
          <a-button type="primary" @click="confirmEdit">确认</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-drawer>
  </div>
</template>

<script>
import {getWorkerList, editWorker, deleteWorker, getWorkType} from "@/api/api";

export default {
  name: "WorkerList",
  data() {
    return {
      columns: [
        {title: '编号', dataIndex: 'identify' },
        {title: '姓名', dataIndex: 'name'},
        {title: '年龄', dataIndex: 'age'},
        {title: '生源地', dataIndex: 'bornFrom'},
        {title: '联系方式', dataIndex: 'phone'},
        {title: '工龄', dataIndex: 'workTime'},
        {title: '维修类型', dataIndex: 'repairType'},
        {title: '完成订单量', dataIndex: 'finish'},
        {title: '总收益', dataIndex: 'benefit', scopedSlots: {customRender: 'balance'}},
        {title: '操作', dataIndex: 'operation', fixed: 'right', width: 180, scopedSlots: {customRender: 'operation'}},
      ],
      workerData: [],
      paginationConfig: {
        total: 1,
        pageSize: 10,
        current: 1
      },
      loading: true,
      searchWorkerName: '',
      deleteVisible: false,
      editVisible: false,
      deleteId: '',
      editInfo: {
        id: '',
        name: '',
        age: '',
        bornFrom: '',
        phone: '',
      },
      editInfoRules: {
        name: [{required: true, trigger: 'change', message: '请输入用户名'}],
        age: [{required: true, trigger: 'change', message: '请输入年龄'}],
        bornFrom: [{required: true, trigger: 'change', message: '请输入生源地'}],
        phone: [{required: true, trigger: 'change', message: '请输入联系方式'}],
      },
      searchData: {
        name: '',
        identify: '',
        repairType: undefined,
      },
      repairTypeArr: [],
      dataType: 'data',
    }
  },
  methods: {
    /**
     * 获取维修工列表
     */
    getWorkerListInfo() {
      let options = {
        page: this.paginationConfig.current,
        size: this.paginationConfig.pageSize,
        name: this.searchData.name,
        identify: this.searchData.identify,
        repairType: this.searchData.repairType || ''
      }
      getWorkerList(options)
        .then(res => {
          let list = res.data.list;
          for (let i in list) {
            list[i].key = i;
          }
          this.paginationConfig.total = res.data.total;
          this.workerData = list;
          this.dataType === 'search' ? this.$message.success('查询成功') : '';
        })
        .catch(err => {
          this.$message.error(err.data);
        })
        .finally(() => {
          this.loading = false;
        })
    },
    /**
     * 查询数据
     */
    searchTableData() {
      this.dataType = 'search';
      this.getWorkerListInfo();
    },
    /**
     * 表格页码切换方法
     * @param pagination
     * @param filters
     * @param sorter
     * @param currentDataSource
     */
    handleTablePageChange(pagination, filters, sorter, {currentDataSource}) {
      this.dataType = 'data';
      this.paginationConfig.current = pagination.current;
      this.getWorkerListInfo();
    },
    /**
     * 查询维修工
     */
    searchNewWorker() {
      if (this.searchWorkerName !== '') {
        let options = {
          RepairName: this.searchWorkerName,
        };
        searchWorker(options)
            .then(res => {
              let newData = this.data = [];
              if (res.data !== null) {
                newData.push(res.data);
                for (let i in newData) {
                  newData[i].key = i;
                }
                this.data = newData;
              }
            })
            .catch(err => {
              console.log(err);
              this.loading = false;
            });
      }else {
        this.getWorkerListInfo();
      }
    },
    /**
     * 编辑框关闭
     */
    drawerClose() {
      this.editVisible = false;
    },
    /**
     * 编辑维修工数据
     */
    editWorkerInfo(row) {
      this.editVisible = true;
      this.editInfo = {
        id: row.id,
        name: row.name,
        age: row.age,
        bornFrom: row.bornFrom,
        phone: row.phone
      };
    },
    /**
     * 取消编辑
     */
    cancelEdit() {
      this.$refs.editBasicForm.resetFields();
      this.editVisible = false;
      this.getWorkerListInfo();
    },
    /**
     * 确认编辑
     */
    confirmEdit() {
      console.log(this.editInfo);
      editWorker(this.editInfo)
        .then(res => {
          this.$message.success('编辑成功');
          this.editVisible = false;
          this.getWorkerListInfo();
        })
        .catch(err => {
          this.$message.error(err.data);
        })
    },
    /**
     * 删除维修工数据
     */
    deleteWorkerInfo(row) {
      this.deleteId = row.id;
      this.deleteVisible = true;
    },
    /**
     * 取消删除
     */
    cancelDelete() {
      this.deleteVisible = false;
      this.deleteId = '';
    },
    /**
     * 确认删除
     */
    confirmDelete() {
      deleteWorker({ id: this.deleteId })
        .then(res => {
          this.$message.success('删除成功');
          this.deleteVisible = false;
          this.getWorkerListInfo();
        })
        .catch(err => {
          this.$message.error(err.data);
        })
    },
    /**
     * 获取岗位类型
     */
    getWorkTypeInfo() {
      getWorkType()
        .then(res => {
          this.repairTypeArr = res.data.map(item => ({
            label: item.work,
            value: item.id,
          }));
        })
        .catch(err => {
          this.$message.error(`获取岗位类型数据失败，${err.data}`);
        })
    }
  },
  mounted() {
    this.getWorkerListInfo();
  }
}
</script>

<style scoped>

</style>